<template>
	<view class="page">
		<view class="header">
			选择行为图片
		</view>
		<view class="column">
			<span></span>
			<view class="choose">
				<view v-show="!img_path" @click="select_img">+</view>
				<image v-show="img_path" :src="img_path" mode="aspectFill"></image>
				<view v-show="img_path" @click="del_img">-</view>
			</view>
		</view>
		<view class="btn" @click="send">确定</view>
	</view>
</template>

<script>
	import {IP} from '../../../../network/requestUrl.js'
	export default {
		data() {
			return {
				img_path: '',
				selected: 'img',
				lost_id: '',
				score: 0
			};
		},
		onLoad(options) {
			this.lost_id = options.lost_id
		},
		methods: {
			select_img() {
					uni.chooseImage({
						count: 1
					}).then(res => {
						console.log(res)
						this.img_path = res[1]['tempFilePaths'][0]
						// console.log(this.img_path)
						this.isImg = true
					})			
			},
			del_img() {
				this.img_path = ""
			},
			async send() {
				uni.showLoading({
					title: '上传中'
				})
				uni.uploadFile({
					url: IP + '/index/Demo/PictureAi',
					filePath: this.img_path,
					name: 'image',
					formData: {
						lost_id: this.lost_id
					},
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				})
				
				setTimeout(() => {
				uni.hideLoading()
					uni.showToast({
						title: '上传成功',
						icon: 'none'
					})
					setTimeout(uni.navigateBack, 1000)
				}, 3000)
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background-color: white;
	.header {
		margin: 10px;
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F2F2F2;
	}
	.column {
		margin: 10px 10px;
		textarea {
			display: block;
			width: calc(100% - 10px);
			height: 70px;
			padding: 5px;
			margin-top: 10px;
			background: none;
			outline: none;
			border: 1px solid #dddddd;
			border-radius: 3px;
		}
		
		.choose {
			margin-top: 10px;
			display: flex;
			align-items: center;
			view {
				width: 80px;
				height: 80px;
				border: 1px solid #dddddd;
				border-radius: 3px;
				font-size: 50px;
				line-height: 80px;
				color: #999999;
				text-align: center;
			}
			
			image {
				margin-right: 20px;
				width: 80px;
				height: 80px;
			}
		}
	}
	.btn {
		width: 50%;
		margin: 30px auto;
		padding: 10px 0;
		background-color: #1CBAB6;
		color: white;
		text-align: center;
		border-radius: 30px;
		cursor: pointer;
		&:active {
			background-color: #999999;
			color: #333333;
		}
	}
	.footer {
		margin-top: 50px;
		text-align: center;
		span {
			font-size: 20px;
			color: orange;
		}
	}
}
</style>
